.create_template_page {
  width: 100vw;
  height: 100vh;
  user-select: none;
  .main {
    width: 100%;
    height: calc(100% - 75px);
    display: flex;
    position: relative;
    left: 0;
    top: 75px;
    overflow: hidden;
    .tab_type {
      width: 90px;
      height: 100%;
      border-right: 1px solid #ccd5db;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .type_tab {
        width: 100%;
        height: 450px;
        .type_item {
          width: 90px;
          height: 90px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .icon {
            font-size: 30px;
            margin-bottom: 5px;
            pointer-events: none;
          }
          .text {
            font-size: 15px;
            pointer-events: none;
          }
        }
        .type_item:hover {
          transition: 0.5s;
          background-color: #1261ff;
          color: white;
        }
        .type_item_hover {
          background-color: #1261ff;
          color: white;
        }
      }
      .help_box {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .api {
          width: 75px;
          height: 30px;
          background: url("../../image/create_template/api.png");
          background-size: 100% 100%;
          font-size: 16px;
          text-align: center;
          line-height: 30px;
          color: white;
        }
        .help {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          position: relative;
          .icon {
            font-size: 23px;
            margin-bottom: 5px;
          }
          .text {
            font-size: 14px;
          }
          .help_popup {
            width: 90px;
            height: 140px;
            bottom: 0;
            left: -30px;
            position: absolute;
            display: none;
            background-color: white;
            > div {
              width: 100%;
              height: 35px;
              font-size: 16px;
              text-align: center;
              line-height: 35px;
            }
            > div:hover {
              background-color: #1261ff;
              color: white;
            }
          }
        }
        .help:hover {
          .help_popup {
            display: block;
          }
        }
      }
    }
    .template_box {
      width: 360px;
      height: 100%;
      background-color: white;
      .tab {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .tab_top {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-around;
          background-color: #f5f8fb;
          .tab_top_item {
            width: 120px;
            height: 60px;
            text-align: center;
            line-height: 60px;
          }
          .tab_top_item:hover {
            font-weight: bold;
          }
          .tab_top_item_active {
            background-color: white;
            font-weight: bold;
          }
        }
        .tab_item {
          display: inline-block;
          width: 80px;
          height: 30px;
          border-radius: 20px;
          border: none;
          color: black;
          text-align: center;
          font-size: 18px;
          transition: all 0.5s;
          cursor: pointer;
          margin: 5px;
          margin-top: 20px;
        }
        .tab_item span {
          cursor: pointer;
          display: inline-block;
          position: relative;
          transition: 0.5s;
          font-weight: bold;
          letter-spacing: 0.04em;
        }
        .tab_item span::after {
          content: ">";
          position: absolute;
          opacity: 0;
          top: 0;
          right: -20px;
          transition: 0.5s;
        }
        .tab_item:hover span {
          padding-right: 20px;
        }
        .tab_item:hover span::after {
          opacity: 1;
          right: 0;
        }
        .collection {
          width: 100%;
          height: 60%;
          display: flex;
          justify-content: center;
          align-items: center;
          .box {
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            img {
              width: 190px;
              height: 160px;
            }
            span {
              font-size: 18px;
            }
          }
        }
        .buy {
          width: 100%;
          height: 60%;
          display: flex;
          justify-content: center;
          align-items: center;
          .box {
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            img {
              width: 190px;
              height: 160px;
            }
            span {
              font-size: 18px;
            }
          }
        }
      }
    }
    .workspace {
      flex: 1;
      background-color: #eef2f8;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      .edid_area {
        width: 400px;
        height: 800px;
        background-color: white;
        position: relative;
        background-size: 100% 100%;
        border: 1px dashed #a3afb7;
        .editItem {
          z-index: 20;
          position: relative;
          .Information_box {
            width: 140px;
            height: 60px;
            position: absolute;
            right: 0;
            bottom: -65px;
            visibility: hidden;
            .Information {
              width: 100%;
              height: 100%;
              background-color: black;
              color: #cccf;
              display: flex;
              flex-wrap: wrap;
              border-radius: 5px;
              opacity: 0.4;
              > div {
                width: 50%;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
        .text_tmp:hover {
          border: 1px dashed #a3afb7 !important;
        }
        .active {
          outline: 1px solid #70c0ff;
          user-select: none;
        }
        .resizers {
          display: none;
        }
        .active .resizers {
          display: block;
        }
        .resizers .resizer {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #fff;
          border: 2px solid #1890ff;
          position: absolute;
        }
        .resizers .resizer.top-left {
          left: -5px;
          top: -5px;
          cursor: nwse-resize;
        }
        .resizers .resizer.top-right {
          right: -5px;
          top: -5px;
          cursor: nesw-resize;
        }
        .resizers .resizer.bottom-left {
          left: -5px;
          bottom: -5px;
          cursor: nesw-resize;
        }
        .resizers .resizer.bottom-right {
          right: -5px;
          bottom: -5px;
          cursor: nwse-resize;
        }
        .change_page {
          position: absolute;
          width: 260px;
          bottom: -50px;
          left: calc(50% - 130px);
          font-size: 18px;
          color: #1261ff;
        }
        .mainstream_screens {
          width: 70px;
          height: 25px;
          font-size: 15px;
          color: #999999;
          position: absolute;
          top: 0;
          left: 420px;
          pointer-events: all;
        }
        .mainstream_screens:hover {
          color: #666666;
        }
        .regular_screen {
          width: 400px;
          height: 600px;
          border: 1px dashed #a3afb7;
          position: absolute;
          left: -1px;
          top: 90px;
          position: relative;
          .text {
            width: 70px;
            height: 25px;
            font-size: 15px;
            color: #999999;
            position: absolute;
            top: 0;
            left: 420px;
            pointer-events: all;
          }
          .text:hover {
            color: #666666;
          }
        }
        .phone_page {
          width: 400px;
          height: 700px;
          background-color: #e0e0e0;
          position: absolute;
          border-radius: 50px;
          top: 50px;
          left: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          .phone_box {
            width: 390px;
            height: 600px;
            background-color: white;
          }
        }
      }
      .edid_area::before {
        position: fixed;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
            0deg,
            black 0px,
            black 1px,
            transparent 1px,
            transparent 100px
          ),
          linear-gradient(
            90deg,
            black 0px,
            black 1px,
            transparent 1px,
            transparent 100px
          );
        background-size: 50px 50px;
        opacity: 0.1;
        z-index: -1;
      }
    }
    .tool {
      width: 380px;
      height: 100%;
      position: relative;
      background-color: white;
      display: flex;
      box-sizing: border-box;
      .tool_box {
        width: 50px;
        height: 100%;
        border-right: 1px solid #bcbbc2;
        display: flex;
        flex-direction: column;
        align-items: center;
        > div {
          width: 50px;
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20px;
        }
        > div:not(.line, .add_size, .screen_size, .subtract_size):hover {
          background-color: #1261ff;
          color: white;
        }
        .add_size:hover,
        .subtract_size:hover {
          color: #1261ff;
        }
        .screen_size {
          font-size: 15px;
        }
        .line {
          width: 35px;
          height: 0px;
          border-top: 1px solid #bfc0c1;
          margin: 5px 0px;
        }
      }
      .tool_page_manage {
        width: 100%;
        height: 100%;
        .tool_tab {
          width: 100%;
          height: 50px;
          display: flex;
          .tool_tab_item {
            flex: 1;
            text-align: center;
            line-height: 50px;
            background-color: #f1f5f9;
            font-size: 18px;
          }
          .tool_tab_item:hover {
            font-weight: bold;
          }
          .tool_tab_item_active {
            background-color: white;
            font-weight: bold;
          }
        }
        .tool_tab_box {
          width: 100%;
          height: calc(100% - 50px);
          overflow-y: scroll;
          .page_setup {
            width: 90%;
            margin: 0 auto;
            .background_color {
              width: 100%;
              .bgc_change {
                width: 100%;
                height: 46px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 15px;
                .bgc_title {
                  font-size: 18px;
                }
                .bgc_switch {
                  width: 190px;
                  height: 46px;
                  background-color: #f0f2f8;
                  border-radius: 5px;
                  display: flex;
                  justify-content: space-evenly;
                  align-items: center;
                  > div {
                    width: 90px;
                    height: 40px;
                    text-align: center;
                    border-radius: 3px;
                    line-height: 40px;
                  }
                  > div:hover {
                    background-color: white;
                    color: #1261ff;
                  }
                  > .active {
                    background-color: white;
                    color: #1261ff;
                  }
                }
              }
              .bgc_box {
                width: 100%;
                height: 90px;
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: center;
                .bgc_box_item {
                  width: 40px;
                  height: 40px;
                  border-radius: 5px;
                }
                .bgc_box_item:hover {
                  border: 1px solid #1261ff !important;
                }
                .color_picker {
                  width: 40px;
                  height: 40px;
                  background: linear-gradient(
                    45deg,
                    red,
                    orange,
                    yellow,
                    green,
                    blue,
                    indigo,
                    violet
                  );
                  background-size: 400% 400%;
                  animation: gradient 5s ease infinite;
                }

                @keyframes gradient {
                  0% {
                    background-position: 0% 50%;
                  }
                  50% {
                    background-position: 100% 50%;
                  }
                  100% {
                    background-position: 0% 50%;
                  }
                }
                .transparent_color {
                  background: linear-gradient(
                      45deg,
                      rgba(0, 0, 0, 0.4) 25%,
                      transparent 25%,
                      transparent 75%,
                      rgba(0, 0, 0, 0.4) 75%,
                      rgba(0, 0, 0, 0.4) 100%
                    ),
                    linear-gradient(
                      45deg,
                      rgba(0, 0, 0, 0.4) 25%,
                      transparent 25%,
                      transparent 75%,
                      rgba(0, 0, 0, 0.4) 75%,
                      rgba(0, 0, 0, 0.4) 100%
                    );
                  background-size: 10px 10px;
                  background-position: 0 0, 5px 5px;
                }
              }
              .gradien_bgc {
                width: 100%;
                height: 200px;
                margin-top: 15px;
                .show_bgc {
                  width: 100%;
                  height: 40px;
                  background: linear-gradient(
                      45deg,
                      rgba(0, 0, 0, 0.4) 25%,
                      transparent 25%,
                      transparent 75%,
                      rgba(0, 0, 0, 0.4) 75%,
                      rgba(0, 0, 0, 0.4) 100%
                    ),
                    linear-gradient(
                      45deg,
                      rgba(0, 0, 0, 0.4) 25%,
                      transparent 25%,
                      transparent 75%,
                      rgba(0, 0, 0, 0.4) 75%,
                      rgba(0, 0, 0, 0.4) 100%
                    );
                  background-size: 10px 10px;
                  background-position: 0 0, 5px 5px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  > div {
                    width: 36px;
                    height: 36px;
                    border: 3px solid white;
                    margin: 0 5px;
                    border-radius: 3px;
                  }
                }
                .change_angle {
                  width: 100%;
                  height: 50px;
                  margin-top: 20px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .text {
                    font-size: 18px;
                  }
                  .silder {
                    width: 140px;
                    height: 100%;
                  }
                  .input_angle {
                    width: 75px;
                    height: 100%;
                    border-radius: 5px;
                    outline: none;
                    border: 1px solid #ccc;
                    font-size: 18px;
                    text-align: center;
                    line-height: 50px;
                  }
                }
                .gradien_bgc_box {
                  width: 100%;
                  height: 90px;
                  margin-top: 15px;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-between;
                  align-items: center;
                  .bgc_box_item {
                    width: 40px;
                    height: 40px;
                    border-radius: 5px;
                  }
                  .bgc_box_item:hover {
                    border: 1px solid #1261ff;
                  }
                  .transparent_color {
                    background: linear-gradient(
                        45deg,
                        rgba(0, 0, 0, 0.4) 25%,
                        transparent 25%,
                        transparent 75%,
                        rgba(0, 0, 0, 0.4) 75%,
                        rgba(0, 0, 0, 0.4) 100%
                      ),
                      linear-gradient(
                        45deg,
                        rgba(0, 0, 0, 0.4) 25%,
                        transparent 25%,
                        transparent 75%,
                        rgba(0, 0, 0, 0.4) 75%,
                        rgba(0, 0, 0, 0.4) 100%
                      );
                    background-size: 10px 10px;
                    background-position: 0 0, 5px 5px;
                  }
                }
              }
            }
            .background_overlay {
              width: 100%;
              height: 230px;
              margin-top: 20px;
              .bgc_change {
                width: 100%;
                height: 45px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 15px;
                .bgc_title {
                  font-size: 18px;
                }
                .bgc_switch {
                  width: 190px;
                  height: 46px;
                  background-color: #f0f2f8;
                  border-radius: 5px;
                  display: flex;
                  justify-content: space-evenly;
                  align-items: center;
                  > div {
                    width: 90px;
                    height: 40px;
                    text-align: center;
                    border-radius: 3px;
                    line-height: 40px;
                  }
                  > div:hover {
                    background-color: white;
                    color: #1261ff;
                  }
                  > .active {
                    background-color: white;
                    color: #1261ff;
                  }
                }
              }
              .add_image_box {
                width: 100%;
                height: 370px;
                margin-top: 15px;
                .add_image {
                  width: 100%;
                  height: 170px;
                  border: 1px solid #e6ebed;
                  border-radius: 5px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  .add_icon {
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    background-color: #e8effe;
                    color: #1261ff;
                    font-size: 30px;
                    text-align: center;
                    margin-bottom: 5px;
                  }
                  .add_text {
                    width: 220px;
                    font-size: 15px;
                    text-align: center;
                    color: #999999;
                  }
                }
                .add_image:hover {
                  border: 1px solid #1890ff;
                  .add_icon {
                    background-color: #1261ff;
                    color: white;
                  }
                }
                .opacity {
                  width: 100%;
                  height: 40px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-top: 20px;
                  .text {
                    font-size: 18px;
                  }
                  .change_opacity {
                    width: 190px;
                    height: 40px;
                  }
                }
                .bgc_animation {
                  width: 100%;
                  height: 40px;
                  margin-top: 20px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .text {
                    font-size: 18px;
                  }
                  .go_add {
                    font-size: 18px;
                    color: #666666;
                  }
                  .go_add:hover {
                    color: #1261ff;
                  }
                }
                .bgc_all_page {
                  width: 100%;
                  height: 40px;
                  border: 1px solid #ecf0f2;
                  margin-top: 20px;
                  border-radius: 5px;
                  text-align: center;
                  line-height: 40px;
                  font-size: 18px;
                }
                .bgc_all_page:hover {
                  border: 1px solid #1261ff;
                  color: #1261ff;
                }
              }

              .add_texture_box {
                width: 100%;
                height: 450px;
                border: 1px solid black;
                margin-top: 15px;
                border-radius: 5px;
              }
            }
          }
        }
        ::-webkit-scrollbar {
          display: none;
        }
      }
      .ai_aides {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 10px;
        left: -40px;
        color: white;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
        border-radius: 5px;
        background: linear-gradient(
          95deg,
          red,
          orange,
          yellow,
          green,
          blue,
          indigo,
          violet
        );
        background-size: 400% 400%;
        animation: gradient 4s ease infinite;
      }

      @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
    }
    .tool:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 2px;
      bottom: 0;
      width: 10px; /* 阴影的宽度 */
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 调整阴影效果 */
      z-index: -1; /* 确保阴影在元素下方 */
    }
  }
  .component_settings_box {
    width: 330px;
    height: 930px;
    background-color: white;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
    position: absolute;
    right: 300px;
    top: 0;
    z-index: 30;
  }
}

:where(.css-dev-only-do-not-override-17seli4).ant-tooltip .ant-tooltip-inner {
  font-size: 15px;
}
#Tooltitle {
  color: #abacad;
  font-size: 15px;
}
